<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>冷链订单设备关联</title>
  <link rel="stylesheet" href="styles/bootstrap/bootstrap.css">
  <link rel="stylesheet" href="styles/bootstrap-table.css">
  <link rel="stylesheet" href="lib/layui/css/layui.css">
  <link rel="stylesheet" href="styles/bootstrap-datetimepicker.min.css">
  <link rel="stylesheet" href="styles/awesome/font-awesome.min.css">
  <link rel="stylesheet" href="sfy/styles/fonts/iconfont.css">
  <link rel="stylesheet" href="styles/reset.css">
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/cy.css">
  <link rel="stylesheet" href="styles/sfy_nav.css">
  <link rel="stylesheet" href="styles/newstyle.css">
</head>
<body>
  <div class="device-association displayflex">
    <div class="device-association-left flex1">
      <b class="title">已选择订单</b>
      <div>
        <table class="table device-table device-left-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>订单号</th>
              <th>发货方式</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>01</td>
              <td>WL201807180004170003</td>
              <td>一体式保温箱</td>
              <td>
                <a class="iconfont icon-close"></a>
              </td>
            </tr>
            <tr>
              <td>02</td>
              <td>WL201807180004170003</td>
              <td>一体式保温箱</td>
              <td>
                <a class="iconfont icon-close"></a>
              </td>
            </tr>
            <tr>
              <td>03</td>
              <td>WL201807180004170003</td>
              <td>一体式保温箱</td>
              <td>
                <a class="iconfont icon-close"></a>
              </td>
            </tr>
            <tr>
              <td>04</td>
              <td>WL201807180004170003</td>
              <td>一体式保温箱</td>
              <td>
                <a class="iconfont icon-close"></a>
              </td>
            </tr>
            <tr>
              <td>05</td>
              <td>WL201807180004170003</td>
              <td>一体式保温箱</td>
              <td>
                <a class="iconfont icon-close"></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="device-association-middle flexitem"> 》</div>
    <div class="device-association-right flex1">
      <b class="title">设备选择</b>
      <div>
        <table class="table device-table device-right-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>保温箱设备编号</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>01</td>
              <td>WLLL4170003A</td>
              <td>
                <label class="icon-checkbox">
                  <input type="checkbox">
                  <span></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>02</td>
              <td>WLLL4170003A</td>
              <td>
                <label class="icon-checkbox">
                  <input type="checkbox">
                  <span></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>03</td>
              <td>WLLL4170003A</td>
              <td>
                <label class="icon-checkbox">
                  <input type="checkbox">
                  <span></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>04</td>
              <td>WLLL4170003A</td>
              <td>
                <label class="icon-checkbox">
                  <input type="checkbox">
                  <span></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>05</td>
              <td>WLLL4170003A</td>
              <td>
                <label class="icon-checkbox">
                  <input type="checkbox">
                  <span></span>
                </label>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="lib/jquery.min.js"></script>
  <script>
    $(".icon-checkbox input").on('change', function(){
      if($("input[type='checkbox']").is(':checked')){
        $(this).parents('tr').addClass('current')
      } else {
        $(this).parents('tr').removeClass('current')
      }
    })
  </script>
</body>
</html>